<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 400px;
            border: 1px solid #000;
            position: relative;
            overflow: hidden;
            background-color: rgb(112, 79, 46);
        }

        img {
            width: 500px;
            height: 300px;
        }

        p {
            font-size: 18px;
            line-height: 35px;
            color: white;
            margin: 5px;
        }

        /* .s1 {
            font-size: 25px;
        } */
    </style>
</head>

<body>
    <div class="box">
        <img src="" alt="">
        <p class="p1"></p>
        <p class="p2">
            <span class="s1">● </span>
            <span class="s2">● </span>
            <span class="s3">● </span>
            <span class="s4">● </span>
            <span class="s5">● </span>
            <span class="s6">● </span>
            <span class="s7">● </span>
            <span class="s8">● </span>
        </p>
    </div>
    <script>
        const sliderData = [
            { url: '../images/img/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
            { url: '../images/img/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
            { url: '../images/img/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
            { url: '../images/img/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
            { url: '../images/img/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
            { url: '../images/img/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
            { url: '../images/img/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
            { url: '../images/img/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
        ]
        const box = document.querySelector('.box')
        const img = document.querySelector('img')
        const span = document.querySelectorAll('span')
        const p = document.querySelector('.p1')
        // const num = Math.floor(Math.random() * sliderData.length)
        let num = -1
        const time = setInterval(function () {
            num++
            if (num >= sliderData.length) {
                num = -1
                span[sliderData.length - 1].style.fontSize = '18px'
            }
            img.src = sliderData[num].url
            p.innerHTML = sliderData[num].title
            span[num].style.fontSize = '25px'
            span[num - 1].style.fontSize = '18px'
            box.style.backgroundColor = sliderData[num].color

        }, 1000)

        // img.src = sliderData[num].url
        // p.innerHTML = sliderData[num].title
        // span[num].style.fontSize = '25px'
        // box.style.backgroundColor = sliderData[num].color





    </script>
</body>

</html>